<template>
  <div class="box">
    <Title text="物流车辆信息统计" />
    <div class="ctxt">
      <div class="lfz">
        <SecondTitle text="物流运输企业总数量" />
        <div class="company">
          <div class="text">
            物流运输企业<br/>总数量
          </div>
          <div class="quantity">
            {{cmpQuantity}}<span class="bit"> 家</span>
          </div>
        </div>
      </div>
      <div class="rgz">
        <SecondTitle text="企业业务经营范围" />
        <div class="rangeContent" v-if= 'listData.length'>
          <div class="rangeItem"  v-for="(item, index) in listData" :key='index'>
            <Process :name="item.name" :total="item.total" :rate="item.rate" :width="'auto'" :unit="'家'"></Process>
          </div>
          <!-- <div class="rangeItem">
            <Process :name="'国歌国歌和'" :total="80" :rate="80" :unit="'家'"></Process>
          </div>
          <div class="rangeItem">
            <Process :name="'国歌国歌和'" :total="80" :rate="80" :unit="'家'"></Process>
          </div>
          <div class="rangeItem">
            <Process :name="'国歌国歌和'" :total="80" :rate="80" :unit="'家'"></Process>
          </div>
          <div class="rangeItem">
            <Process :name="'国歌国歌和'" :total="80" :rate="80" :unit="'家'"></Process>
          </div>
          <div class="rangeItem">
            <Process :name="'国歌国歌和'" :total="80" :rate="80" :unit="'家'"></Process>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Title from './title.vue'
import SecondTitle from './second-title.vue'
import Process from './process.vue'
import { getExpressVehicleInfos, getRightNatureBusiness, getExpressCmpInfo } from '@/api/express'

export default {
  components: {
    Title,
    SecondTitle,
    Process
  },
  data() {
    return {
      cmpQuantity: 0,
      listData: []
    }
  },
  mounted() {
    getExpressCmpInfo().then(res => {
      if (res?.success) {
        this.cmpQuantity = res.result?.businessCount
      }
    })
    getExpressVehicleInfos()
    getRightNatureBusiness().then(res => {
      if (res?.success) {
        const { rightNatureBusiness = [] } = res.result || {}
        this.listData = this.handleData(rightNatureBusiness)
        console.log(this.listData, 'this.listDatathis.listDatathis.listData')
      }
    })
  },
  methods: {
    handleData(data) {
      const max = this.findMAx(data)
      data.forEach(item => {
        item.total = item.ycoordinate
        item.rate = (item.ycoordinate / max) * 100
        item.name = item.xcoordinate
      })
      return data
    },
    findMAx(arr) {
      let max = arr[0].ycoordinate
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].ycoordinate > max) {
          max = arr[i].ycoordinate
        }
      }
      return max
    }
  }
}
</script>

<style lang="less">
.box {
  height: 1477px;
  .ctxt {
    overflow: hidden;
    padding-top: 163px;
    .lfz {
      float: left;
      width: 1390px;
      // margin-right: 291px;
      .company {
        width: 1390px;
        height: 771px;
        text-align: center;
        margin-top: 163px;
        background: url(~@/assets/images/jz/ep-cp.png) no-repeat;
        background-size: 1390px 771px;
        .text {
          font-size: 60px;
          color: rgba(255, 255, 255, .6);
        }
        .quantity {
          font-size: 92px;
          font-weight: 700;
          margin-top: 24px;
          color: #fff;
          .bit {
            font-size: 48px;
            color: rgba(255, 255, 255, .6);
          }
        }
      }
    }
    .rgz {
      float: right;
      width: 1404px;
      .rangeContent{
        width: 1404px;
        height: 770px;
        padding-top: 60px;
        padding-right: 90px;
        overflow: scroll;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        .rangeItem{
          margin-top: 60px;
          width:1304px;
        }
      }
    }
  }
}
</style>
